import React from 'react';
import { Popover, Input } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('crmPortalStore')
@observer
class CrmE9QuickSearch extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
    this.onSearch = this.onSearch.bind(this);
  }

  componentWillMount() {

  }

  render() {
    const { crmPortalStore } = this.props;
    const { quickSearchTypesVisible, quickSearchTypesSelected } = crmPortalStore;
    const { name } = toJS(quickSearchTypesSelected);
    return (
      <div className="crm-e9header-quick-search">
        <div className="crm-e9header-quick-search-types">
          <Popover
            ecId={`${this && this.props && this.props.ecId || ''}_Popover@xi4xpw`}
            trigger="click"
            placement="bottomLeft"
            content={<QuickSearchTypesContent ecId={`${this && this.props && this.props.ecId || ''}_QuickSearchTypesContent@d7v1eu`} onVisibleChange={this.onVisibleChange} crmPortalStore={crmPortalStore} />}
            overlayClassName="crm-e9header-quick-search-types-overlay"
            visible={quickSearchTypesVisible}
            onVisibleChange={this.onVisibleChange}
          >
            <div className="crm-e9header-quick-search-type">
              <span title={name}>{name}</span>
              <i className="wevicon wevicon-quick-search-arrow" />
            </div>
          </Popover>
        </div>
        <div className="crm-e9header-quick-search-split" />
        <div className="crm-e9header-quick-search-content">
          <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@e8jneu`} id="crm-e9header-quick-search-input" className="crm-e9header-quick-search-input" placeholder={`${getLabel(127014, '搜索内容')}...`} onPressEnter={this.onSearch} />
        </div>
        <div className="crm-e9header-quick-search-icon" title={getLabel(197, '搜索')} onClick={this.onSearch}>
          <i className="wevicon wevicon-quick-search-search" />
        </div>
      </div>
    );
  }

  onVisibleChange(visible) {
    const { crmPortalStore } = this.props;
    crmPortalStore.changeQuickSearchTypesVisible(visible);
  }

  onSearch() {
    const { crmPortalStore } = this.props;
    const value = document.getElementById('crm-e9header-quick-search-input').value;
    crmPortalStore.onQuickSearch(value);
  }
}

@observer
class QuickSearchTypesContent extends React.Component {
  constructor(props) {
    super(props);
    this.onQuickSearchTypesClick = this.onQuickSearchTypesClick.bind(this);
  }

  render() {
    const { crmPortalStore } = this.props;
    const quickSearchTypes = toJS(crmPortalStore.quickSearchTypes);
    return (
      <div className="crm-e9header-quick-search-types-content">
        {
          quickSearchTypes.map((item, index) => (
            <div
              key={index}
              className="crm-e9header-quick-search-types-item"
              title={item.name}
              onClick={() => this.onQuickSearchTypesClick(item)}
            >
              <i className={`wevicon wevicon-quick-search-${item.type}`} />
              <span>{item.name}</span>
            </div>
          ))
        }
      </div>
    );
  }

  onQuickSearchTypesClick(item) {
    const { crmPortalStore } = this.props;
    crmPortalStore.changeQuickSearchTypesSelected(item);
  }
}

export default CrmE9QuickSearch;
